@page "/circular-gauge/multiple-axis"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the multiple axes in the gauge and options are available to change the direction, start, and end angle of an axis.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render and configure multiple axes in gauge. Use axes collection to render multiple axes in gauge. Each axis can be customized with its pointers and ticks.</p>
   <p>More information on the multiple axes can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/axes'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfCircularGauge Title="Gauge with Multiple Axes">
        <CircularGaugeTitleStyle Color="#808080"/>
        <CircularGaugeAxes>
            <CircularGaugeAxis Radius="95%" Minimum="0" Maximum="160" StartAngle="@FirstAxisStartangle" EndAngle="@FirstAxisEndangle" Direction="@FirstaAxisDirection">
                <CircularGaugeAxisLineStyle Width="1.5" Color="#9E9E9E"/>
                <CircularGaugeAxisLabelStyle Position="Position.Inside" AutoAngle="true"/>
                <CircularGaugeAxisMajorTicks Position="Position.Inside" Width="2" Height="10" Color="#757575"/>
                <CircularGaugeAxisMinorTicks Position="Position.Inside" Width="2" Height="5" Color="#757575"/>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="80" Radius="100%" Color="#333333" MarkerHeight="15" MarkerWidth="15" Type="PointerType.Marker" MarkerShape="GaugeShape.Triangle">
                        <CircularGaugePointerAnimation Enable="true"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
            <CircularGaugeAxis Radius="95%" Minimum="0" Maximum="240" StartAngle="@SecondAxisStartangle" EndAngle="@SecondAxisEndangle" Direction="@SecondAxisDirection">
                <CircularGaugeAxisLineStyle Width="1.5" Color="#E84011"/>
                <CircularGaugeAxisLabelStyle Position="Position.Outside" AutoAngle="true">
                    <CircularGaugeAxisLabelFont Color="#E84011"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisMajorTicks Position="Position.Outside" Width="2" Height="10" Color="#E84011"/>
                <CircularGaugeAxisMinorTicks Position="Position.Outside" Width="2" Height="5" Color="#E84011"/>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="120" Radius="100%" Color="#C62E0A" MarkerHeight="15" MarkerWidth="15" Type="PointerType.Marker" MarkerShape="GaugeShape.InvertedTriangle">
                        <CircularGaugePointerAnimation Enable="true"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table  style="width: 100%">
                <tr>
                    <td>
                        <div> Axis </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@AxisData" @bind-Value="@AxisValue">
                                <DropDownListEvents TItem="AxisType" TValue="string" ValueChange="@AxisChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div> Direction </div>
                    </td>
                    <td>
                        <div>
                            <SfDropDownList DataSource="@AxisDirectionData" @bind-Value="@AxisDirectionValue">
                                <DropDownListEvents TItem="AxisType" TValue="string" ValueChange="@AxisDirectionChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Start Angle <span class="value">@StartAngleValue</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" min="0" max="360" value="@StartAngleValue" @onchange="StartAngleChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>End Angle <span class="value">@EndAngleValue</span> </div>
                    </td>
                    <td>
                        <div>
                            <input type="range" min="0" max="360" value="@EndAngleValue" @onchange="EndAngleChange"/>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    td {
        width: 40%;
    }
    tr {
        height:40px;
    }
    .value{
        margin-left:10px;
    }
</style>

@code{
    private double FirstAxisStartangle = 220;
    private double SecondAxisStartangle = 220;
    private double FirstAxisEndangle = 140;
    private double SecondAxisEndangle = 140;
    private GaugeDirection FirstaAxisDirection = GaugeDirection.ClockWise;
    private GaugeDirection SecondAxisDirection = GaugeDirection.ClockWise;
    private string AxisValue = "Axis1";
    private string AxisDirectionValue = "ClockWise";
    private double StartAngleValue = 220;
    private double EndAngleValue = 140;
    public class AxisType{
        public string Name { get; set; }
    }
    private List<AxisType> AxisData = new List<AxisType> {
        new AxisType{ Name = "Axis1"},
        new AxisType{ Name = "Axis2"},
    };
    private List<AxisType> AxisDirectionData = new List<AxisType> {
        new AxisType{ Name = "ClockWise"},
        new AxisType{ Name = "AntiClockWise"},
    };
    private void AxisChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, AxisType> args) {
        AxisValue = (args.Value).ToString();
        if (AxisValue == "Axis1") {
            AxisDirectionValue = FirstaAxisDirection == GaugeDirection.ClockWise ? "ClockWise" : "AntiClockWise";
            StartAngleValue = FirstAxisStartangle;
            EndAngleValue = FirstAxisEndangle;
        }
        else {
            AxisDirectionValue = SecondAxisDirection == GaugeDirection.ClockWise ? "ClockWise" : "AntiClockWise";
            StartAngleValue = SecondAxisStartangle;
            EndAngleValue = SecondAxisEndangle;
        }
    }
    private void AxisDirectionChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, AxisType> args) {
        AxisDirectionValue = (args.Value).ToString();
        if (AxisDirectionValue == "ClockWise") {
            if (AxisValue == "Axis1") { FirstaAxisDirection = GaugeDirection.ClockWise; }
            else { SecondAxisDirection = GaugeDirection.ClockWise; }
        }
        else {
            if (AxisValue == "Axis1") { FirstaAxisDirection = GaugeDirection.AntiClockWise; }
            else { SecondAxisDirection = GaugeDirection.AntiClockWise; }
        }
    }
    private void StartAngleChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        StartAngleValue = Convert.ToDouble(args.Value);
        if (AxisValue == "Axis1") { FirstAxisStartangle = StartAngleValue; }
        else { SecondAxisStartangle = StartAngleValue; }
    }
    private void EndAngleChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        EndAngleValue = Convert.ToDouble(args.Value);
        if (AxisValue == "Axis1") { FirstAxisEndangle = EndAngleValue; }
        else { SecondAxisEndangle = EndAngleValue; }
    }
}